<template lang="">
        <!-- 
            action	必选参数，上传的地址 
            list-type	文件列表的类型	string
            on-preview	点击文件列表中已上传的文件时的钩子	function(file)
            on-remove	文件列表移除文件时的钩子	function(file, fileList)
            on-success	文件上传成功时的钩子	function(response, file, fileList)
            on-error	文件上传失败时的钩子	function(err, file, fileList)
            on-change	文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用	function(file, fileList)
        -->
        <div>
            <el-upload
            ref="upload"
            :action="url"
            :auto-upload="false"
            list-type="picture-card"
            :file-list="fileList"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
            :on-success="handleSuccess"
            :limit="2"
            :on-exceed="handleExceed"
            multiple
            >
            <i class="el-icon-plus"></i>
        </el-upload>
        <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
        </div>
</template>
<script>
import { upload, host } from '@/api/base';

export default {
  props: {
    fileList: {
      type: Array,
      default: function() {
        return []
      }
    }
  },
  data() {
    return {
      dialogImageUrl: "",
      dialogVisible: false,
      url: upload,
      imgList: [],
      // 图片列表的容器 数据格式: [{url: ''}, {}]
    };
  },
  methods: {
    // 文件超出个数限制的钩子
    handleExceed(files, fileList) {
      this.$message.error('最多只能上传2张图片');
    },
    // 禁止自动上传--手动上传服务器
    submitUpload() {
      this.$refs.upload.submit();
    },
    // 成功上传图片的回调函数
    handleSuccess(response, file, fileList) {
      console.log('成功函数', response, file, fileList);
      // 获取一个完整的图片地址---为了添加商品的时候，需要传递图片地址
      let url = response.url.slice(7);
      let imgUrl = host + '/' + url;
      this.imgList.push(imgUrl);
      this.$emit('sendImage', imgUrl);
    },
    handleRemove(file, fileList) {
      // console.log('hhhhhhhhhhhh', file, fileList);
      this.$emit('removeImage', file.url);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
  },
};
</script>
<style lang="less" scoped></style>